<template>
  <a-row :gutter="24">
    <a-col :md="24">
      <a-card :style="cardStyle" :bordered="false">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <!-- 搜索区域 -->
          <a-form layout="inline" @keyup.enter.native="searchQuery">
            <a-row :gutter="24">
              <a-col :md="6" :sm="24">
                <a-form-item label="类别" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-tree-select style="width:100%" :dropdownStyle="{maxHeight:'200px',overflow:'auto'}" allow-clear
                                 :treeData="categoryTree" v-model="queryParam.categoryId" placeholder="请选择类别">
                  </a-tree-select>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item label="关键词" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-input placeholder="请输入条码、名称、规格、型号查询" v-model="queryParam.bomParam"></a-input>
                </a-form-item>
              </a-col>
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                <a-col :md="6" :sm="24">
                  <a-button type="primary" @click="searchQuery">查询</a-button>
                  <a-button style="margin-left: 8px" @click="searchReset">重置</a-button>
                  <!--                  <a @click="handleToggleSearch" style="margin-left: 8px">-->
                  <!--                    {{ toggleSearchStatus ? '收起' : '展开' }}-->
                  <!--                    <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>-->
                  <!--                  </a>-->
                </a-col>
              </span>
              <!--              <template v-if="toggleSearchStatus">-->
              <!--                <a-col :md="6" :sm="24">-->
              <!--                  <a-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
              <!--                    <a-select placeholder="请选择状态" v-model="queryParam.enabled">-->
              <!--                      <a-select-option value="1">启用</a-select-option>-->
              <!--                      <a-select-option value="0">禁用</a-select-option>-->
              <!--                    </a-select>-->
              <!--                  </a-form-item>-->
              <!--                </a-col>-->
              <!--                <a-col :md="6" :sm="24">-->
              <!--                  <a-form-item label="序列号" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
              <!--                    <a-select placeholder="有无序列号" v-model="queryParam.enableSerialNumber">-->
              <!--                      <a-select-option value="1">有</a-select-option>-->
              <!--                      <a-select-option value="0">无</a-select-option>-->
              <!--                    </a-select>-->
              <!--                  </a-form-item>-->
              <!--                </a-col>-->
              <!--                <a-col :md="6" :sm="24">-->
              <!--                  <a-form-item label="批号" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
              <!--                    <a-select placeholder="有无批号" v-model="queryParam.enableBatchNumber">-->
              <!--                      <a-select-option value="1">有</a-select-option>-->
              <!--                      <a-select-option value="0">无</a-select-option>-->
              <!--                    </a-select>-->
              <!--                  </a-form-item>-->
              <!--                </a-col>-->
              <!--                <a-col :md="6" :sm="24">-->
              <!--                  <a-form-item label="扩展信息" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
              <!--                    <a-input style="width: 100%" placeholder="请输入扩展信息查询" v-model="queryParam.materialOther"></a-input>-->
              <!--                  </a-form-item>-->
              <!--                </a-col>-->
              <!--                <a-col :md="6" :sm="24">-->
              <!--                  <a-form-item label="基础重量" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
              <!--                    <a-input-number style="width: 100%" placeholder="请输入基础重量查询"-->
              <!--                                    v-model="queryParam.weight"></a-input-number>-->
              <!--                  </a-form-item>-->
              <!--                </a-col>-->
              <!--                <a-col :md="6" :sm="24">-->
              <!--                  <a-form-item label="保质期" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
              <!--                    <a-input-number style="width: 100%" placeholder="请输入保质期查询"-->
              <!--                                    v-model="queryParam.expiryNum"></a-input-number>-->
              <!--                  </a-form-item>-->
              <!--                </a-col>-->
              <!--                <a-col :md="6" :sm="24">-->
              <!--                  <a-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
              <!--                    <a-input placeholder="请输入备注查询" v-model="queryParam.remark"></a-input>-->
              <!--                  </a-form-item>-->
              <!--                </a-col>-->
              <!--              </template>-->
            </a-row>
          </a-form>
        </div>
        <!-- 操作按钮区域 -->
        <div class="table-operator" style="margin-top: 5px">
          <a-button v-if="btnEnableList.indexOf(1)>-1" @click="openBomAddModal" type="primary" icon="plus">新增</a-button>
          <!--          <a-button v-if="btnEnableList.indexOf(1)>-1" @click="handleDownloadTemplate" type="primary" icon="download">-->
          <!--            下载模板-->
          <!--          </a-button>-->
          <a-button v-if="btnEnableList.indexOf(1)>-1" @click="handleImportForExcel" type="primary" icon="import">
            导入
          </a-button>
          <a-dropdown>
            <a-menu slot="overlay">
              <a-menu-item key="1" v-if="btnEnableList.indexOf(1)>-1" @click="batchDel">
                <a-icon type="delete"/>
                删除
              </a-menu-item>
            </a-menu>
            <a-button>
              批量操作
              <a-icon type="down"/>
            </a-button>
          </a-dropdown>
          <a-popover trigger="click" placement="right">
            <template slot="content">
              <a-checkbox-group @change="onColChange" v-model="settingColumns" :defaultValue="settingColumns">
                <a-row style="width: 500px">
                  <template v-for="(item,index) in defColumns">
                    <template>
                      <a-col :span="8">
                        <a-checkbox :value="item.dataIndex">
                          <j-ellipsis :value="item.title" :length="10"></j-ellipsis>
                        </a-checkbox>
                      </a-col>
                    </template>
                  </template>
                </a-row>
              </a-checkbox-group>
            </template>
            <a-button icon="setting">列设置</a-button>
          </a-popover>
        </div>
        <!-- table区域-begin -->
        <div>
          <a-table
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :scroll="scroll"
            :loading="loading"
            :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange, columnWidth:'2%'}"
            @change="handleTableChange">
            <span slot="action" slot-scope="text, record">
              <a @click="handleEdit(record)">编辑</a>
              <a-divider v-if="btnEnableList.indexOf(1)>-1" type="vertical"/>
              <a-popconfirm v-if="btnEnableList.indexOf(1)>-1" title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                <a>删除</a>
              </a-popconfirm>
            </span>
            <template slot="customBarCode" slot-scope="text, record">
              {{record.barCode}}
            </template>
          </a-table>
        </div>
        <!-- table区域-end -->
        <!-- 表单区域 -->
        <bom-modal ref="modalForm" @ok="onBomEditOk"></bom-modal>
        <j-select-material-modal ref="selectBomModal" @ok="onSelectAddBom"
                                 :multi="false"></j-select-material-modal>

        <j-select-material-modal ref="selectBomMaterialModal" @ok="onSelectAddBomMaterial"
                                 :multi="true"></j-select-material-modal>

        <import-file-modal ref="importForExcelModal" @ok="onImportForExcelOk"></import-file-modal>
      </a-card>
    </a-col>
  </a-row>
</template>
<script>
  import {queryMaterialCategoryTreeList} from '@/api/api'
  import {filterObj} from '@/utils/util'
  import BomModal from './modules/BomModal'
  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
  import JEllipsis from '@/components/jeecg/JEllipsis'
  import JDate from '@/components/jeecg/JDate'
  import Vue from 'vue'
  import JSelectMaterialModal from "@/components/jeecgbiz/modal/JSelectMaterialModal";
  import ImportFileModal from "../../components/tools/ImportFileModal";

  export default {
    name: "BomList",
    mixins: [JeecgListMixin],
    components: {
      ImportFileModal,
      JSelectMaterialModal,
      BomModal,
      JEllipsis,
      JDate
    },
    data () {
      return {
        addBomModel: {
          materials: []
        },
        categoryTree: [],
        mPropertyListShort: '',
        model: {},
        labelCol: {
          span: 5
        },
        wrapperCol: {
          span: 18,
          offset: 1
        },
        // 查询条件
        queryParam: {
          categoryId: '',
          bomParam: ''
        },
        ipagination: {
          pageSizeOptions: ['10', '20', '30', '100', '200']
        },
        // 实际表头
        columns: [],
        // 初始化设置的表头
        settingColumns: ['barCode', 'name', 'standard', 'model', 'categoryName', 'unit', 'action'],
        // 默认的列
        defColumns: [
          {
            title: '操作',
            dataIndex: 'action',
            align: "center",
            width: 100,
            scopedSlots: {customRender: 'action'},
          },
          {title: '条码', dataIndex: 'barCode', width: 160, scopedSlots: {customRender: 'customBarCode'}},
          {title: '名称', dataIndex: 'name', width: 160, scopedSlots: {customRender: 'customName'}},
          {title: '规格', dataIndex: 'standard', width: 120},
          {title: '型号', dataIndex: 'model', width: 120},
          {title: '类别', dataIndex: 'categoryName', width: 80},
          {title: '单位', dataIndex: 'unit', width: 80}
        ],
        url: {
          list: "/bom/find",
          delete: "/bom/delete",
          deleteBatch: "/bom/deleteBatch"
        },
        templateUrl: "/doc/bom_template.xlsx",
        importExcelUrl: "/bom/importForExcel"
      }
    },
    created () {
      this.model = Object.assign({}, {});
      this.initColumnsSetting()
      this.loadTreeData();
    },
    computed: {
    },
    methods: {
      getQueryParams () {
        //获取查询条件
        let sqp = {}
        if (this.superQueryParams) {
          sqp['superQueryParams'] = encodeURI(this.superQueryParams)
          sqp['superQueryMatchType'] = this.superQueryMatchType
        }
        let searchObj = Object.assign({}, this.queryParam);
        var param = Object.assign(sqp, searchObj, this.isorter, this.filters);
        // param.field = this.getQueryField();
        param.current = this.ipagination.current;
        param.size = this.ipagination.pageSize;
        return filterObj(param);
      },
      //加载初始化列
      initColumnsSetting () {
        let columnsStr = Vue.ls.get('bomColumns')
        if (columnsStr && columnsStr.indexOf(',') > -1) {
          this.settingColumns = columnsStr.split(',')
        }
        this.columns = this.defColumns.filter(item => {
          if (this.settingColumns.includes(item.dataIndex)) {
            return true
          }
          return false
        })
      },
      //列设置更改事件
      onColChange (checkedValues) {
        this.columns = this.defColumns.filter(item => {
          if (checkedValues.includes(item.dataIndex)) {
            return true
          }
          return false
        })
        let columnsStr = checkedValues.join()
        Vue.ls.set('bomColumns', columnsStr)
      },
      loadTreeData () {
        let that = this;
        let params = {};
        params.id = '';
        queryMaterialCategoryTreeList(params).then((res) => {
          if (res) {
            that.categoryTree = [];
            for (let i = 0; i < res.length; i++) {
              let temp = res[i];
              that.categoryTree.push(temp);
            }
          }
        })
      },
      handleEdit: function (record) {
        this.$refs.modalForm.edit(record);
        this.$refs.modalForm.title = "编辑";
        this.$refs.modalForm.disableSubmit = false;
        if (this.btnEnableList.indexOf(1) === -1) {
          this.$refs.modalForm.isReadOnly = true
        }
      },
      searchReset () {
        this.loadData(1);
      },
      openBomAddModal () {
        this.$refs.selectBomModal.showModal(undefined, "第一步:选择生产的产品");
        this.$refs.selectBomModal.disableSubmit = false;
      },
      openBomMaterialAddModal () {
        this.$refs.selectBomMaterialModal.showModal(undefined, "第二步:选择所需物料");
        this.$refs.selectBomMaterialModal.disableSubmit = false;
      },
      onSelectAddBom (materials) {
        if (materials.length == 0) {
          return;
        }
        let selectedMaterial = materials[0];
        this.addBomModel = {
          name: selectedMaterial.name,
          barCode: selectedMaterial.mBarCode,
          standard: selectedMaterial.standard,
          model: selectedMaterial.model,
          materialId: selectedMaterial.materialId,
          categoryId: selectedMaterial.categoryId,
          categoryName: selectedMaterial.categoryName,
          unit: selectedMaterial.unit,
          materials: []
        };
        //开始构建第二步
        this.openBomMaterialAddModal();
      },
      onSelectAddBomMaterial (materials) {
        materials = materials || []
        let bom = this.addBomModel;
        let bomMaterials = materials.map((m) => {
          return {
            materialId: m.materialId,
            name: m.name,
            barCode: m.mBarCode,
            bomId: bom.id,
            bomName: bom.name,
            count: 1,
            categoryId: m.categoryId,
            categoryName: m.categoryName,
            unit: m.unit
          }
        })
        this.addBomModel.materials = bomMaterials;
        //open
        this.$refs.modalForm.add(this.addBomModel);
      },
      onBomEditOk (bom) {
        this.$refs.modalForm.close();
        this.searchQuery();
      },
      // handleDownloadTemplate (id) {
      //   let url = this.templateUrl;
      //   window.open(url);
      // },
      handleImportForExcel () {
        let importExcelUrl = this.importExcelUrl;
        let templateUrl = this.templateUrl;
        let templateName = 'Bom导入模板[下载]';
        this.$refs.importForExcelModal.initModal(importExcelUrl, templateUrl, templateName);
        this.$refs.importForExcelModal.title = "Bom导入";
      },
      onImportForExcelOk () {
        this.searchQuery()
      }
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less'
</style>